<template>
  <div class="bottom flex2"><div id="echarts"></div></div>
</template>

<script>
export default {
  name: 'AreaBottom',
  props: ['query', 'cityCode'],
  data () {
    return {
      orderNumList: [],
      areaList: []
    }
  },
  mounted () {
    let cityCodesLocal = localStorage.getItem('cityCode')
    if (this.cityCode == null || this.cityCode === undefined) {
      console.log('bottom缓存cityCodesLocal：', cityCodesLocal)
      this.handle(cityCodesLocal)
    } else {
      console.log('bottom不是缓存cityCode：', this.cityCode)
      this.handle(this.cityCode)
    }
    /*this.handle(this.cityCode)*/
  },
  methods: {
    childBottomFun (code) {
      this.areaList = []
      this.orderNumList = []
      this.handle(code)
    },
    handle (code) {
      this.orderSumFun(this.areaList, this.orderNumList)
      this.$http.post(this.$api.Hqhjsl.hqhjsl, 'qxcode=' + code, true).then(result => {
        if (result === null || result === undefined) {
          return
        }
        console.log('底部', result.data.response.countTotalRegionCall)
        let arr = result.data.response.countTotalRegionCall
        for (let val of arr) {
          this.areaList.push(val.region)
          this.orderNumList.push(val.num)
        }
        this.orderSumFun(this.areaList, this.orderNumList)
      })
    },
    orderSumFun (arrX, arrY) {
      var myCharts = this.$echarts.init(document.getElementById('echarts'))
      let option = {
        title: {
          text: '',
          textStyle: {
            color: '#fff',
            fontSize: 16
          },
          left: '50px',
          top: '5px'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          // 控制图的大小，调整下面这些值就可以，
          x: 40,
          y2: 40
        },
        xAxis: [
          {
            type: 'category',
            data: arrX,
            axisLine: { // y轴
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true, // 这行代码控制着坐标轴y轴的文字是否显示
              color: '#fff'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: { // y轴
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: { // y轴刻度线
              show: false
            },
            axisLabel: {
              show: false, // 这行代码控制着坐标轴y轴的文字是否显示
              color: '#fff'
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '25',
            itemStyle: {
              normal: {
                color: '#41bcf4',
                label: {
                  show: true,
                  position: 'centen',
                  textStyle: {
                    color: 'white',
                    fontSize: 20
                  }
                }
              }
            },
            data: arrY
          }]
      }
      myCharts.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom {
  width: 100%;
  height: 100%;
  background: url(../../../assets/img/ouhai/left1.png) no-repeat;
  background-size: 100% 100%;
  #echarts {
    height: 100%;
    width: 100%;
  }
}
</style>
